<template>
  <section class="vbox" id="bjax-el">
    <section class="scrollable padder-lg">
      <a @click='getrecommend' data-toggle="class:fa-spin" class="pull-right text-muted m-t-lg"><i id="refresh" class="icon-refresh i-lg  inline"></i></a>
      <h2 class="font-thin m-b">推荐MV</h2>
      <div class="row row-sm">
        <div class="col-xs-12 col-sm-3" v-for='item in recommendMv.result' @click="$store.commit('playMv', item.id)">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay opacity r r-2x bg-black">
                <div class="center text-center m-t-n">
                  <a><i class="fa fa-play-circle i-2x"></i></a>
                </div>
              </div>
              <div class="top">
                <span class="badge bg-success bg-empty m-l-sm m-t-sm">{{item.copywriter.length<20? item.copywriter:item.copywriter.substr(0,25)+'...'}}</span>
              </div>
              <a><img v-lazy="item.picUrl" alt="" class="r r-2x img-full"></a>
            </div>
            <div class="padder-v">
              <a class="text-ellipsis">{{item.name}}</a>
              <a class="text-ellipsis text-xs text-muted">{{item.artistName}}</a>
            </div>
          </div>
        </div>

      </div>
      <h3 class="font-thin m-b">MV 排行榜</h3>
      <div class="row row-sm">
        <div class="col-xs-6 col-sm-4 col-md-3" v-for='item in topMv.data' @click="$store.commit('playMv', item.id)">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay opacity r r-2x bg-black">
                <div class="center text-center m-t-n">
                  <a><i class="fa fa-play-circle i-2x"></i></a>
                </div>
              </div>
              <a><img v-lazy="item.cover" alt="" class="r r-2x img-full"></a>
            </div>
            <div class="padder-v">
              <a class="text-ellipsis">{{item.name}}</a>
              <a class="text-ellipsis text-xs text-muted">{{item.artistName}}</a>
            </div>
          </div>
        </div>
      </div>
      <ul class="pagination pagination">
        <li @click="$store.commit('nextMv','getMvTop')"><a><i class="fa fa-chevron-left"></i></a></li>
        <li @click='nextMv'><a><i class="fa fa-chevron-right"></i></a></li>
      </ul>
    </section>
    <loading v-show='active'></loading>
  </section>

</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'
  import loading from '../loading/loading.vue'


  export default {
    components:{loading},
    data() {
      return {}
    },
    mounted() {
      this.getMvTop();
      this.getrecommend();
    },
    computed: mapGetters([  //变量
      'mvOffset',
      'data',
      'func',
      'topMv',
      'recommendMv',
      'active'
    ]),
    methods: mapActions([  //方法
      'nextMv',
      'upMv',
      'getMvTop',
      'getrecommend',
      'playMv'
    ]),

  }
</script>
<style>

</style>
